<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>
<body style="background-color: var(--sapBackgroundColor); height: 250px;">
<!-- playground-fold-end -->

<ui5-tabcontainer>
	<ui5-tab text="Notes">
		Notes go here ...
	</ui5-tab>
	<ui5-tab text="Products">
		Products go here ...
		<ui5-tab slot="items" text="Computers">
			Computers go here ...
			<ui5-tab slot="items" text="Laptops" selected>
				Laptops go here ...
			</ui5-tab>
			<ui5-tab slot="items" text="Desktops">
				<ui5-tab slot="items" text="Work Stations">
					Work Stations go here ...
				</ui5-tab>
				<ui5-tab slot="items" text="Game Stations">
					Game Stations go here ...
				</ui5-tab>
				Desktops go here ...
			</ui5-tab>
		</ui5-tab>
		<ui5-tab text="Phones" slot="items">
			<ui5-tab text="Smartphones" slot="items">
				Smartphones go here ...
			</ui5-tab>
			<ui5-tab text="Tablets" slot="items">
				Tablets go here ...
			</ui5-tab>
			Phones go here ...
		</ui5-tab>
	</ui5-tab>
	<ui5-tab text="Orders">
		Orders go here ...
		<ui5-tab slot="items" text="Attachments">
			Order attachments go here ...
		</ui5-tab>
	</ui5-tab>
</ui5-tabcontainer>

<!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>
</html>
<!-- playground-fold-end -->

